<template>
  <el-table
    :data="props.data"
    size="small"
    height="210px"
    :cell-style="{ backgroundColor: 'transparent' }"
    :row-style="{ backgroundColor: 'transparent' }"
    :header-row-style="{ backgroundColor: 'transparent' }"
    :header-cell-style="{ backgroundColor: 'transparent' }"
  >
    <el-table-column label="ACID" min-width="80px">
      <template #default="scope">
        <b>{{ scope.row.acid }}</b>
      </template>
    </el-table-column>

    <el-table-column label="起飞" min-width="120px">
      <template #default="scope">
        <span>{{ scope.row.dep }}</span>
        <span class="tag">{{ scope.row.etdStr }}</span>
      </template>
    </el-table-column>

    <el-table-column label="降落" min-width="120px">
      <template #default="scope">
        <span>{{ scope.row.arr }}</span>
        <span class="tag">{{ scope.row.etaStr }}</span>
      </template>
    </el-table-column>

    <el-table-column label="航路变更" min-width="120px">
      <template #default="scope">
        <span style="color: var(--el-color-info)">{{ scope.row.gate }}</span>
        <el-icon style="margin: 0 4px; transform: translateY(2px)"
          ><DArrowRight
        /></el-icon>
        <span style="font-weight: bolder">{{ scope.row.gate2 }}</span>
      </template>
    </el-table-column>

    <el-table-column label="当前状态" min-width="120px">
      <template #default="scope">
        <el-text type="primary" size="small" v-if="scope.row.status >= 2">
          <el-icon><SuccessFilled /></el-icon>
          <span style="margin-left: 4px">已批复</span>
        </el-text>
        <el-text type="danger" size="small" v-else-if="scope.row.status == 1">
          <el-icon><CircleCloseFilled /></el-icon>
          <b class="vibrate-slight" style="margin-left: 4px">已批复未发报</b>
        </el-text>
        <el-text type="info" size="small" v-else>
          <el-icon><QuestionFilled /></el-icon>
          <span style="margin-left: 4px">未批复</span>
        </el-text>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup>
// import dayjs from "dayjs";
const props = defineProps({
  data: {
    required: true,
    type: Array,
  },
});
</script>

<style scoped>
@import "@/styles/vibrate.css";

.tag {
  font-size: 12px;
  border-radius: 6px;
  background-color: var(--el-color-primary-light-9);
  color: var(--el-color-primary);
  border: 1px solid var(--el-color-primary);
  padding: 1px 6px;
  margin-left: 8px;
}
</style>
